<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
				font-size: 14px;
			}
			#header{
				width: 90%;
				height: 110px;
				margin: 0 5%;
			}
			#logo-con{
				display: inline-block;
				width: 170px;
				height: 50px;
				margin-top: 30px;
				float: left;
			}
			#logo-title{
				height: 35px;
				width: 200px;
				margin-left: 20px;
				padding-left: 20px;
				margin-top: 45px;
				line-height: 35px;
				float: left;
				font-size: 24px;
				display: inline-block;
				border-left: 1px solid darkgray;
			}
			#had{
				width: 160px;
				height: 20px;
				line-height: 20px;
				margin-top: 60px;
				float: right;
			}
			#container{
				width: 90%;
				overflow: hidden;
				margin: 0 5%;
			}
			#infor{
				width: 450px;
				float: left;
				border-right: 1px solid lightgray;
				margin-left: 170px;
				padding: 20px;
				color: gray;
			}
			#infor div{
				width: 400px;
				height: 55px;
				
				line-height: 50px;
				border: 1px solid lightgray;
			}
			#infor span{
				display: block;
				height: 30px;
				line-height: 30px;
				padding-left: 20px;
			}
			#infor label{
				width: 110px;
				display: inline-block;
				padding-left: 20px;
			}
			#infor input{
				height: 30px;
				border: none;
				outline: none;
			}
		</style>
		<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				$('#header,#container').css('border','1px solid black');
				$('#logo-con').css('background','url(img/icon.png) no-repeat');
				$('input').each(function(index){
					$('input').focus(function(){
						console.log('dddd');
						if(this.val == ""){
							 switch(index){
								case 0:
								    $('span').eq(0).html("支持中文、字母、数字、“-”、“_”的组合，4-20个 字符");
								    break;
								case 1:
								    $('span').eq(1).html("建议使用字母、数字和符号两种及以上的组合，6-20个字符");
								    break;
								case 2:
								    $('span').eq(2).html("请确认密码");
								    break;
								case 3:
								    $('span').eq(3).html("验证完成后，可用该手机登录和找回密码");
								    break;
								case 4:
								    $('span').eq(4).html("看不清楚？点击图片更换验证码");
								    break;
								case 5:
								    $('span').eq(5).html("请输入手机验证码");
								    break;
							}
						}
					})						   
					
				})
			})
		</script>
	</head>
	<body>
		<div id="header">
			<a id='logo-con' href="http://www.jd.com/"></a>
			<div id="logo-title">欢 迎 注 册</div>
			<div id="had">
				已有账号
				<a href="https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F%3Fcu%3Dtrue%26utm_source%3Dbaidu-pinzhuan%26utm_medium%3Dcpc%26utm_campaign%3Dt_288551095_baidupinzhuan%26utm_term%3D0f3d30c8dba7459bb52f2eb5eba8ac7d_0_a674ffdd39fb40cebc7d71c4cf73144c">请登录</a>
			</div>
		</div>
		<div id="container">
			<div id="infor">
				<form action="" method="post">
					<div id="userName">
					    <label>用&nbsp;户 &nbsp;名</label>
					    <input type="text"  value="" placeholder="请输入用户名"/>
				    </div>
				     <span></span>
				    <div id="userName">
					    <label>设 置 密 码</label>
					    <input type="text" name="" id="" value="" placeholder="请输入密码"/>
				    </div>
				     <span></span>
				     <div id="userName">
					    <label>确 认 密 码</label>
					    <input type="text" name="" id="" value="" placeholder="请输入确认密码"/>
				    </div>
				     <span></span>
				     <div id="userName">
					    <label>
					    	<select name="" style="border: none;outline: none;color: gray;">
					    	    <option value="">中 国 + 86</option>
					        </select>
					    </label>
					    <input type="text" name="" id="" value="" placeholder="请输入手机号码"/>
				    </div>
				     <span></span>
				     <div id="userName">
					    <label>验&nbsp;证&nbsp;码</label>
					    <input type="text" name="" id="" value=""placeholder="请输入验证码" />
					    <!--<button style="height: 50px;background: lightgray;border: none;margin: 2px;width: 70px;text-align: center;"></button>-->
				    </div>
				     <span></span>
				     <div id="userName">
					    <label>手机验证码</label>
					    <input type="text" name="" id="" value="" placeholder="请输入手机验证码"/>
					    <button style="height: 50px;background: lightgray;border: none;margin: 2px;width: 80px;text-align: center;">获取验证码</button>
				    </div>
				     <span></span>
				     <div id="userName" style="border: none;">
					    <input type="checkbox" style="height: 12px;" id="" value="" /> 我已阅读并同意<a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A//www.jd.com/%3Fcu%3Dtrue%26utm_source%3Dbaidu-pinzhuan%26utm_medium%3Dcpc%26utm_campaign%3Dt_288551095_baidupinzhuan%26utm_term%3D0f3d30c8dba7459bb52f2eb5eba8ac7d_0_53061f23fd7742bb8c9da1805377da2f">《京东用户注册协议》</a>
				    </div>
				     <span></span>
				    <div id="" style="background: red;border: none;text-align: center;">
				    	<input type="submit" style="width: 98%;height: 50px;background: red;color: white;font-weight: bold;" id="" value="立即注册" />
				    </div>
				</form>
				
			</div>
			<div id="right" style="float: left;padding-top: 50px;">
				<img src="img/bg.png"/>
			</div>
		</div>
	</body>
</html>
